<template>
  <view class="detail">
    <view class="header">
      {{goodsObj.name}}
    </view>
    <!-- 内容 -->
    <scroll-view class="detailScroll" scroll-y="true">
      <image :src="goodsObj.listPicUrl" mode=""></image>
      <view class="tag">
        {{goodsObj.promTag}}
      </view>
      <view class="price">
        ￥{{goodsObj.retailPrice}}
      </view>
      <!-- 详情说明信息 -->
      <view class="list" style="margin-left: 5%;font-size: 28upx;line-height: 50upx;">
            <view>1) 100%桑蚕丝填充，丝丝精粹不掺杂</view>
            <view>2) 创新井字拉网工艺，桑蚕丝不易黏连结块</view>
            <view>3) 两种面料可选，贡缎手感细腻，竹棉清爽透气</view>
            <view>4) AB双面设计，多种活性印花不易褪色</view>
            <view>5) 88%无瑕疵填充，丝丝精粹不掺杂</view>
            <view>6) 创新井字拉网工艺，桑蚕丝不易黏连结块</view>
            <view>7) 五种面料可选，贡缎手感细腻，竹棉清爽透气</view>
            <view>8) AB顶级，多种活性印花</view>
      </view>
    </scroll-view>
    
    <!-- 底部 -->
    <view class="footer">
     <view class="img">
        <image src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type=webp" mode=""></image>
     </view>
      <view class="btn">立即购买</view>
      <view class="btn cart" @click="addCart">加入购物车</view>
    </view>
  </view>
</template>

<script>
import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        goodsObj:{},  //当前商品对象
      };
    },
    onLoad(options){
      console.log(JSON.parse(options.goodsItem))
      this.goodsObj=JSON.parse(options.goodsItem)
    },
    methods:{
        ...mapMutations('cart',['addGoodsItemMutation']),
        //加入购物车
        addCart(){
            this.addGoodsItemMutation(this.goodsObj)
        }
    }
  }
</script>

<style lang="stylus">
  .detail
    .header
      height:90rpx
      line-height: 90rpx
      width:570rpx
      margin:0 auto
      text-align: center
    .detailScroll
      height:calc(100vh-90rpx)
      image
        width:100%
        height:750rpx
      .tag
        width:90%
        height:100rpx
        line-height: 100rpx
        background-color:#bb2c08
        text-align: center
        margin:20rpx auto
        color:#fff
        font-size:32rpx
        border-radius: 10rpx
      .price
        font-size 50rpx
        color #dd1a21
        line-height: 70rpx
        margin-left 5%
        
    viewport-fit: 10rpx

    .footer
      display:flex
      position:fixed
      bottom:0
      left:0
      right:0
      height:100rpx
      line-height: 100rpx
      border-top:1px solid #ccc
      border-right:1px solid #ccc
      .img
        flex:1
        background-color:#fff
        image
          display: block
          margin:10px auto
          width:60rpx
          height:60rpx
          line-height: 60rpx
          background-color:#fff
      .btn
        flex:2
        border-left:1px solid #ccc
        background-color:#fff
        text-align: center
        &.cart
          background-color:#bb2c08
          color:#fff
          font-family: 900
</style>
